<template>
  <div>
    <canvas ref="qrcodeCanvas" class="qrcode"></canvas>
  </div>
</template>
 
<script>
import QRCode from 'qrcode'
 
export default {
  name: 'QrCodeComponent',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.generateQRCode()
  },
  methods: {
    generateQRCode() {
      const canvas = this.$refs.qrcodeCanvas
      QRCode.toCanvas(canvas, this.text, error => {
        if (error) console.error(error)
      })
    }
  }
}
</script>
<style scoped>
  .qrcode {
    width: 100px !important;
    height: 100px !important;
  }
</style>